<template>
    <div id="fm-making-form-section">
        <fm-making-form ref="formMaker">
            <template slot="action">
                <el-button type="text" size="medium" @click="preview">预览</el-button>
                <el-button type="text" size="medium" @click="save">保存</el-button>
                <el-button type="text" size="medium" @click="back">返回</el-button>
            </template>
        </fm-making-form>
    </div>
</template>
<script>
    export default {
        name: "form-maker",
        data () {
            return {
                formData: {
                    list: [],
                    config: {
                        labelWidth: 100,
                        labelPosition: 'top'
                    },
                },
            }
        },
        watch: {
          '$route': 'getFormData'
        },
        mounted: function () {
          // console.log(this.$route.query.id)
            if (this.$route.query.id) {
                this.getRequest('/api/routing/openModify?id=' + this.$route.query.id).then(resp => {
                    console.log(resp)
                    if (resp.code === 20000 && resp.data) {
                        this.setFormData(resp.data)
                    }
                })
            }
        },
        methods: {
            setFormData: function (data) {
                let formData = this.formData
                if (data && data.routingContent) {
                    formData  = JSON.parse(data.routingContent)
                }
                this.$refs.formMaker.setJSON(formData)
            },
            preview: function () {
                this.$refs.formMaker.handlePreview()
            },
            getFormData: function () {
                console.log(this.$route)
                if (this.$route.path === '/deviceManagement/form-maker' && this.$route.query.id) {
                    this.getRequest('/api/routing/openModify?id=' + this.$route.query.id).then(resp => {
                        console.log(resp)
                        if (resp.code === 20000 && resp.data) {
                            this.setFormData(resp.data)
                        }
                    })
                }

            },
            save: function () {
                const params = this.$route.query
                console.log(this.$refs.formMaker.getJSON())
                params.routingContent = JSON.stringify(this.$refs.formMaker.getJSON())
                this.postRequest('/api/routing/saveRouting', params).then(resp => {
                    console.log(resp)
                })
            },
            back: function () {
                this.$router.back()
            }
        }
    }
</script>

<style lang="scss">
    #fm-making-form-section .el-container{
        height: auto!important;
    }
</style>
